<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .border {
      width: 20px;
      height: 20px;
      background-color: rgba(255, 0, 0, 0.3);
      margin: 0 auto;
      border-bottom: 20px solid blue;
      border-image: linear-gradient(to top, transparent 50%, #000 50%) 0 0 100% 0;
    }

    .border2 {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
      position: relative;
    }

    .border2::before {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      background-color: blue;
      background-image: linear-gradient(to bottom, transparent 50%, #f0f 50%);
    }

    .border3 {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
      position: relative;
    }

    .border3::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 400px;
      height: 200px;
      background-color: blue;
      transform-origin: 400px 0;
      transform: scale(0.5);
    }

    a:link {
      color: red;
      text-decoration: underline;
    }

    a:visited {
      color: blue;
      text-decoration: none;
    }

    a:hover {
      color: black;
      text-decoration: none;
    }

    a:active {
      color: white;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="border"></div>
  <hr />
  <div class="border2"></div>
  <hr />
  <div class="border3"></div>
  <hr />
  <a
    href="https://www.baidu.com/s?wd=a%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BC%AA%E7%B1%BB%E8%AE%BE%E7%BD%AE%E5%8E%9F%E5%88%99&rsv_spt=1&rsv_iqid=0xa812019e002e38eb&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=88093251_33_hao_pg&rsv_enter=1&rsv_dl=tb&oq=a%25E6%25A0%2587%25E7%25AD%25BE%25E7%259A%2584%25E4%25BC%25AA%25E7%25B1%25BB%25E8%25AE%25BE%25E7%25BD%25AE&rsv_t=2c9bBgzjl2m1GhSC9ESFZiwRZKzCzUcYIQV2qYG7VN55yqZjewSAms62s7COxCv4sHJE6Ihk73nR&rsv_btype=t&inputT=800&rsv_pq=a80b2da700029eda&rsv_sug3=207&rsv_sug1=151&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1394">超链接</a>

    <a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage">新的</a>
</body>

</html>